/**
 * Created by Jimmy on 2018/12/30.
 */
<template>
  <div>
    <div class="project">
      <el-table
        border
        :data =[index]
        :stripe= 'true'
        class=""
        style="width:100%">
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">
            <strong style="color: red">{{index + 1}}</strong>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="100" align="center">
          <template slot-scope="scope">
            {{project.TypeName}}
          </template>
        </el-table-column>
        <el-table-column label="编号" width="150" align="center">
          <template slot-scope="scope">
            {{project.ProjectNumber}}
          </template>
        </el-table-column>
        <el-table-column label="负责人" width="100" align="center">
          <template slot-scope="scope">
            {{project.PmName}}
          </template>
        </el-table-column>
        <el-table-column label="质检系数" width="100" align="center">
          <template slot-scope="scope">
            {{project.Qcoe}}
          </template>
        </el-table-column>
        <el-table-column label="项目名称" align="center">
          <template slot-scope="scope">
            {{project.ProjectName}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="danger" size="mini"  @click="deleteProject">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="operation chose">
        <el-popover
          placement="bottom"
          width="600"
          trigger="click">
          <div class="show-search">
            <el-table
              ref="allocationTable"
              :data="searchData.Allocations"
              highlight-current-row
              @current-change="clickAllocationTable">
              <el-table-column width="100" property="CreatedDate" align="center" label="分配日期"></el-table-column>
              <el-table-column width="100" property="AllocatedAmount" align="center" label="分配金额"></el-table-column>
              <el-table-column width="400" property="DetailString" align="center" label="分配详情"></el-table-column>
            </el-table>
          </div>
          <el-button slot="reference" type="success" icon="el-icon-plus" size="mini" >选择分配记录</el-button>
        </el-popover>
      </div>

      <el-table
        :data="project.Allocations"
        border
        :stripe= 'true'
        class=""
        style="width:100%">
        <el-table-column prop="CreatedDate" label="分配日期" width="100" align="center"></el-table-column>
        <el-table-column prop="AllocatedAmount" label="分配金额" width="100" align="center"></el-table-column>
        <el-table-column prop="DetailString" label="分配详情" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" plain @click="deleteAllocation(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="operation chose">
        <el-popover
          placement="bottom"
          width="600"
          trigger="click">
          <div class="show-search">
            <el-table
              ref="costTable"
              :data="searchData.ProjectCosts"
              highlight-current-row
              @current-change="clickCostTable">
              <el-table-column width="100" property="CostDate" label="日期" align="center"></el-table-column>
              <el-table-column width="100" property="TypeName" label="类型" align="center"></el-table-column>
              <el-table-column width="100" property="CostAmount" label="金额" align="center"></el-table-column>
              <el-table-column width="300" property="Desc" label="备注" align="center"></el-table-column>
            </el-table>
          </div>
          <el-button slot="reference" type="success" icon="el-icon-plus" size="mini" >选择项目成本</el-button>
        </el-popover>
      </div>

      <el-table
        :data="project.ProjectCosts"
        border
        :stripe= 'true'
        class=""
        style="width:100%">
        <el-table-column prop="CostDate" label="日期" width="100" align="center"></el-table-column>
        <el-table-column prop="TypeName" label="类型" width="100" align="center"></el-table-column>
        <el-table-column prop="CostAmount" label="金额" width="100" align="center"></el-table-column>
        <el-table-column prop="Desc" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" plain @click="deleteCost(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    index: Number,
    project: Object,
    searchData:Object,
  },
  methods: {
    deleteProject(){
      this.$emit('deleteProjectByIndex',this.index)
    },
    clickAllocationTable(row){
      this.$emit('addAllocationByObjec',this.index,row)
      this.$refs.allocationTable.setCurrentRow();
    },
    deleteAllocation(row){
      this.$emit('deleteAllocationByObject',this.index,row)
    },
    clickCostTable(row){
      this.$emit('addProjectCostByObject',this.index,row)
      this.$refs.costTable.setCurrentRow();
    },
    deleteCost(row){
      this.$emit('deleteProjectCostByObject',this.index,row)
    },
  }
}
</script>

<style scoped>
  .project {
    background-color: white;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  /*.project:first-child{*/
    /*margin-top: 0;*/
  /*}*/
  /*.project:last-child{*/
    /*margin-bottom: 0;*/
  /*}*/
  .operation{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .chose{
    margin-left: 10px;
  }
</style>
